import { chartEncaps } from './chartEncaps.js'

let drawc1 = obj => {
  // obj = {
  //   _t: this,
  //   doms: 'mycharts
  // }
  function getTextAttrs(cfg) {
    return {
      ...cfg.style,
      fontSize: cfg.data.size,
      text: cfg.data.text,
      textAlign: 'center',
      fontFamily: cfg.data.font,
      fill: cfg.color,
      textBaseline: 'Alphabetic'
    }
  }

  // 给 point 注册一个词云的 shape
  obj._t.$registerShape('point', 'cloud', {
    draw(cfg, container) {
      const attrs = getTextAttrs(cfg)
      const textShape = container.addShape('text', {
        attrs: {
          ...attrs,
          x: cfg.x,
          y: cfg.y
        }
      })
      if (cfg.data.rotate) {
        obj._t.$Util.rotate(textShape, (cfg.data.rotate * Math.PI) / 180)
      }
      return textShape
    }
  })
  let data = []
  if (obj._t.chartsConData.repeat === '1') {
    for (let i = 0; i < obj._t.chartData.length; i++) {
      data.push(obj._t.chartData[i])
      let d = obj._t.chartData[i].value / 15
      for (let j = 0; j < 9; j++) {
        data.push({
          name: obj._t.chartData[i].name,
          value: d
        })
      }
    }
  } else {
    data = obj._t.chartData
  }
  const dv = new obj._t.$DataSet.View().source(data)
  const range = dv.range('value')
  const min = range[0]
  const max = range[1]
  const imageMask = new Image()
  imageMask.crossOrigin = ''
  imageMask.src = obj._t.cloudImg
  imageMask.width = 512
  imageMask.height = 512
  imageMask.onload = function() {
    let ww = obj._t.$refs.mycharts
    dv.transform({
      type: 'tag-cloud',
      fields: ['name', 'value'],
      imageMask: imageMask,
      font: 'Verdana',
      size: [512, 512], // 宽高设置最好根据 imageMask 做调整
      padding: 'auto',
      timeInterval: 5000, // max execute time
      rotate() {
        let random = ~~(Math.random() * 4) % 4
        if (random === 2) {
          random = 0
        }
        return random * 90 // 0, 90, 270
      },
      fontSize(d) {
        return ((d.value - min) / (max - min)) * (32 - 8) + 8
      }
    })
    // imageMask.style.fill = '#ccc'

    if (ww.innerHTML !== '') {
      ww.innerHTML = ''
      obj._t.chart = {}
    }
    obj._t.chart = new obj._t.$Chart({
      container: obj.doms,
      autoFit: false,
      width: 712,
      height: 712,
      padding: [0, 0]
    })
    chartEncaps.setDisplay({ doms: obj.doms, display: 'table' })
    obj._t.chart.data(dv.rows)
    obj._t.chart.scale({
      x: { nice: false },
      y: { nice: false }
    })
    obj._t.chart.legend(false)
    obj._t.chart.axis(false)
    obj._t.chart.tooltip({
      showTitle: false,
      showMarkers: false
    })
    obj._t.chart.coordinate().reflect()
    obj._t.chart
      .point()
      .position('x*y')
      .color('text', obj._t.chartsConData.themeColor[0])
      .shape('cloud')
      .state({
        active: {
          style: {
            fillOpacity: 1
          }
        }
      })

    obj._t.chart.interaction('element-active')
    // chartEncaps.setBagShow({ _t: obj._t, src: imageMask.src })
    if (obj._t.chartsConData.bagShow === '1') {
      obj._t.chart.annotation().image({
        start: ['min', 'min'],
        end: ['max', 'max'],
        src: imageMask.src
      })
    }
    obj._t.chart.render()
    obj._t.setLoading(false)
    obj._t.setshadeDisplay(true)
  }
}

export { drawc1 }
